<template>
  <view class="settings-container">
    <view class="header-section">
      <text class="page-title">设置</text>
    </view>
    
    <view class="settings-section">
      <view class="section-title">账户设置</view>
      <view class="setting-item" @click="editProfile">
        <text class="setting-label">个人信息</text>
        <text class="setting-value">{{ userProfile.name }}</text>
        <text class="arrow">›</text>
      </view>
      
      <view class="setting-item" @click="changePassword">
        <text class="setting-label">修改密码</text>
        <text class="arrow">›</text>
      </view>
    </view>
    
    <view class="settings-section">
      <view class="section-title">通知设置</view>
      <view class="setting-item">
        <text class="setting-label">消息推送</text>
        <switch :checked="notificationSettings.push" @change="togglePushNotification" />
      </view>
      
      <view class="setting-item">
        <text class="setting-label">邮件通知</text>
        <switch :checked="notificationSettings.email" @change="toggleEmailNotification" />
      </view>
    </view>
    
    <view class="settings-section">
      <view class="section-title">通用设置</view>
      <view class="setting-item">
        <text class="setting-label">夜间模式</text>
        <switch :checked="generalSettings.darkMode" @change="toggleDarkMode" />
      </view>
      
      <view class="setting-item" @click="clearCache">
        <text class="setting-label">清除缓存</text>
        <text class="setting-value">{{ cacheSize }}</text>
        <text class="arrow">›</text>
      </view>
      
      <view class="setting-item" @click="checkUpdate">
        <text class="setting-label">检查更新</text>
        <text class="setting-value">当前版本 1.0.0</text>
        <text class="arrow">›</text>
      </view>
    </view>
    
    <view class="settings-section">
      <view class="section-title">关于我们</view>
      <view class="setting-item" @click="aboutUs">
        <text class="setting-label">关于我们</text>
        <text class="arrow">›</text>
      </view>
      
      <view class="setting-item" @click="feedback">
        <text class="setting-label">意见反馈</text>
        <text class="arrow">›</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 用户个人信息
const userProfile = ref({
  name: '张三',
  phone: '138****8888',
  avatar: '/static/logo.png'
})

// 通知设置
const notificationSettings = ref({
  push: true,
  email: false
})

// 通用设置
const generalSettings = ref({
  darkMode: false
})

// 缓存大小
const cacheSize = ref('2.5MB')

// 页面加载时初始化
onMounted(() => {
  // 从本地存储获取用户信息
  const storedUser = uni.getStorageSync('user')
  if (storedUser) {
    userProfile.value.name = storedUser.nickname || storedUser.username || '用户'
  }
})

// 编辑个人信息
const editProfile = () => {
  uni.navigateTo({
    url: '/pages/profile/edit'
  })
}

// 修改密码
const changePassword = () => {
  uni.showToast({
    title: '修改密码功能开发中',
    icon: 'none'
  })
}

// 切换推送通知
const togglePushNotification = (e: any) => {
  notificationSettings.value.push = e.detail.value
  uni.showToast({
    title: e.detail.value ? '已开启推送通知' : '已关闭推送通知',
    icon: 'success'
  })
}

// 切换邮件通知
const toggleEmailNotification = (e: any) => {
  notificationSettings.value.email = e.detail.value
  uni.showToast({
    title: e.detail.value ? '已开启邮件通知' : '已关闭邮件通知',
    icon: 'success'
  })
}

// 切换夜间模式
const toggleDarkMode = (e: any) => {
  generalSettings.value.darkMode = e.detail.value
  uni.showToast({
    title: e.detail.value ? '已开启夜间模式' : '已关闭夜间模式',
    icon: 'success'
  })
}

// 清除缓存
const clearCache = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清除缓存吗？',
    success: function (res) {
      if (res.confirm) {
        // 模拟清除缓存
        setTimeout(() => {
          cacheSize.value = '0KB'
          uni.showToast({
            title: '缓存已清除',
            icon: 'success'
          })
        }, 1000)
      }
    }
  })
}

// 检查更新
const checkUpdate = () => {
  uni.showToast({
    title: '当前已是最新版本',
    icon: 'success'
  })
}

// 关于我们
const aboutUs = () => {
  uni.navigateTo({
    url: '/pages/profile/about'
  })
}

// 意见反馈
const feedback = () => {
  uni.navigateTo({
    url: '/pages/profile/feedback'
  })
}
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.settings-section {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-title {
  font-size: 28rpx;
  color: #999;
  padding: 20rpx 30rpx;
  background-color: #f5f5f5;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f5f5f5;
  }
}

.setting-label {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.setting-value {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.arrow {
  font-size: 36rpx;
  color: #ccc;
}
</style>